<template>
	<view>
		<quick-button></quick-button>
		<view class="import-btn">
			<u-button type="primary" shape="circle" text="导入" @click="importHandle"></u-button>
		</view>
		<view class="order-list">
			<view class="order-card" style="position: relative" v-for="(item, index) in list">
				<view class="select-button" style="margin-right: 10rpx" @click="onRadioChange(index)">
					<image src="../../static/tab_select_have.png" v-if="selectItemIndex === index"></image>
					<image src="../../static/tab_select_not.png" v-else></image>
				</view>
				<view class="worker">
					<view class="avatar">
						<image :src="item.nurseImage" mode=""></image>
					</view>
					<view class="worker-info">
						<view class="info">
							<view class="info-item">
								{{ item.nurseName }}
							</view>
							<view class="info-item">
								{{ item.nurseSex }}
							</view>
							<view class="info-item">
								{{ item.nurseAge }}
							</view>
						</view>
						<view class="info">
							<view class="info-item">
								{{ item.nursePhone }}
							</view>
						</view>
						<view class="info">
							<view class="info-item">
								{{ item.nurseAddress }}
							</view>
						</view>
						<view class="info">
							<view class="info-item">
								{{ item.nurseSkill }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>
		<view class="bottom-fixed-view">
			<view class="left">
				<view>已选择：{{ selectItem.nurseName }}</view>
			</view>
			<view class="right-btn" @click="handleSubmit">确认</view>
		</view>
		<u-popup :show="showFile" @close="showFile = false" @open="open">
			<view class="file-box">
				<view style="width: 50%">
					<uni-file-picker file-mediatype="all" limit="1" @select="excelFileSelect" mode="list" @delete="excelDelete" @progress="fj_progress"></uni-file-picker>
				</view>
				<view class="">上传进度:{{ uploadProgress }}</view>
				<view style="width: 100%">
					<u-line-progress height="8" :percentage="uploadProgress" activeColor="#ff0000"></u-line-progress>
				</view>

				<view class="bottom-view">
					<u-button :customStyle="{ width: '280rpx' }" shape="circle" text="暂不取消" @click="closeCancelPopup()"></u-button>
					<u-button :customStyle="{ width: '280rpx' }" @click="cancelConfirm" type="primary" shape="circle" text="确定取消"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import PageInfo from '../../utils/pageutils.js';
import { workerList, orderDetail, sendOrder } from '../../common/api/index.js';
export default {
	props: {
		isInIndex: false
	},
	components: {},
	data() {
		return {
			tabs: [
				{
					name: '全部',
					value: '5'
				},
				{
					name: '待支付',
					value: '0'
				},
				{
					name: '服务中',
					value: '1'
				},
				{
					name: '已取消',
					value: '4'
				}
			],
			current: 5,
			orderStatus: 5, //支付状态
			status: '', //状态
			readForm: {},
			list: [],
			pageInfo: new PageInfo(),
			roles: '',
			selectItem: {
				nurseName: '无'
			},
			selectItemIndex: null,
			orderId: '',
			excelFileLists: '', //存放文件
			showFile: false,
			uploadProgress: ''
		};
	},
	computed: {},
	mounted() {
		this.refresh();
	},
	onPullDownRefresh() {
		console.log('onPullDownRefresh', onPullDownRefresh);
		this.refresh();
	},
	onReachBottom() {
		console.log('222');
		this.loadMore();
	},
	onLoad(opt) {
		console.log('opt', opt);
		if (opt) {
			this.orderId = opt.orderId;
		}
	},
	methods: {
		importHandle() {
			this.showFile = true;
		},
		//上传文件
		excelFileSelect(fj_select_data) {
			var that = this;
			let upload_name = fj_select_data.tempFiles[0].file.name;
			this.excelFileLists = fj_select_data.tempFilePaths[0];
			console.log('打印文件和文件名', fj_select_data.tempFilePaths[0], upload_name);
			const uploadTask = uni.uploadFile({
				url: 'https://applet.youtuyiliao.com/upload/public/uploadImage',
				filePath: fj_select_data.tempFilePaths[0],
				name: 'file',
				success: function (res) {
					var a = JSON.parse(res.data).initialPreview[0]; //对象转数组
					that.excelFileLists = a;
					console.log(that.excelFileLists);
				},
				fail: function (e) {
					console.log(e);
				}
			});
			// 监听上传进度变化
			uploadTask.onProgressUpdate((res) => {
				console.log('上传进度', res.progress);
				// 可以在这里更新UI显示上传进度，例如：
				this.uploadProgress = res.progress;
			});
		},
		//文件删除
		excelDelete(e) {
			this.excelFileLists = '';
			console.log('删除后的文件', this.excelFileLists);
		},
		tabClick(item, index) {
			console.log('item', item);
			this.current = item.value;
			this.refresh();
		},
		// 单选
		onRadioChange(e) {
			this.selectItem = this.list[e];
			this.selectItemIndex = e;
		},
		// 列表
		getList() {
			let userId = uni.getStorageSync('USER_ID');
			this.roles = uni.getStorageSync('ROLES');
			if (this.roles == 1000) {
				this.tabs = [
					{
						name: '全部',
						value: '5'
					},
					{
						name: '待支付',
						value: '0'
					},
					{
						name: '服务中',
						value: '1'
					},
					{
						name: '已取消',
						value: '4'
					}
				];
			}
			if (this.roles == 1) {
				this.tabs = [
					{
						name: '全部',
						value: '5'
					},
					{
						name: '待派单',
						value: '1'
					},
					{
						name: '待接单',
						value: '2'
					},
					{
						name: '服务中',
						value: '3'
					}
				];
			}
			if (this.roles == 2) {
				this.tabs = [
					{
						name: '全部',
						value: '5'
					},
					{
						name: '待接单',
						value: '2'
					},
					{
						name: '服务中',
						value: '3'
					},
					{
						name: '已取消',
						value: '4'
					}
				];
			}
			let params = {
				pageIndex: this.pageInfo.pageIndex,
				pageSize: this.pageInfo.pageSize
				// nurseUserId: userId,
				// orderState: this.current,
				// roles: this.roles,
				// orderState: this.current
			};
			console.log('params', params);
			workerList(params)
				.then((result) => {
					console.log('result', result);
					const list = result.data.rows || [];
					const total = result.data.total;
					this.list = [...this.list, ...list];
					this.pageInfo.total = total;
					this.pageInfo.loadedTotal = this.list.length;
					setTimeout(() => {
						if (this.pageInfo.isNotLoadAll) {
							this.status = 'more';
						} else {
							this.status = 'noMore';
						}
						uni.stopPullDownRefresh();
					}, 200);
				})
				.catch((error) => {
					console.log(error);
				});
		},
		editHandle(item) {
			orderDetail({
				orderId: item.orderId
			}).then((res) => {
				let info = res.data.data;
				this.$store.commit('page/setPageInfo', {
					chooseOrder: true,
					chooseOrderInfo: info
				});
				uni.navigateTo({
					url: `/nursingWorkerPages/pages/itemDetail/itemDetail?code=${info.orderCategory}&serverId=${info.orderServer}`
				});
			});
		},
		// 刷新
		refresh() {
			this.pageInfo.reset();
			this.list = [];
			this.status = 'loading';
			this.getList();
		},
		loadMore() {
			if (this.pageInfo.isNotLoadAll) {
				this.status = 'loading';
				this.pageInfo.nextPage();
				this.getList();
			} else {
				this.status = 'noMore';
			}
		},
		handleSubmit() {
			if (!this.selectItem) {
				uni.showToast({
					title: '请选择护工',
					icon: 'none'
				});
				return;
			}
			sendOrder({
				orderId: this.orderId,
				nurseId: this.selectItem.nurseId
			}).then((result) => {
				if (result.data.code == 200) {
					uni.showToast({
						title: result.data.msg,
						icon: 'none'
					});

					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} else {
					uni.showToast({
						title: result.data.msg,
						icon: 'none'
					});
				}
			});
			// uni.navigateBack()
		}
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
page {
	background: #f9f9f9;
}

.main-container {
	display: flex;
	flex-direction: column;
}

.top-tab-bar {
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(auto-fit, 150rpx);
	grid-template-rows: repeat(auto-fit, 66rpx);
	grid-column-gap: 20rpx;
	grid-row-gap: 26rpx;
	background: #f9f9f9;

	// position: sticky;
	// top: 0;
	// z-index: 2;
	.tab-item {
		width: 150rpx;
		height: 66rpx;
		background: #f1f1f1;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgba(35, 35, 35, 0.8);
		font-size: 26rpx;
	}

	.tab-item-selected {
		background: #dff0ef;
		color: #0bc5ae;
	}
}

.order-card {
	margin-right: 30rpx;
	margin-left: 30rpx;
	background: white;
	padding: 30rpx;
	box-sizing: border-box;
	border-radius: 16rpx;
	margin-top: 20rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;

	.title-and-status {
		display: flex;
		width: 100%;
		justify-content: space-between;

		.title-left {
			display: flex;
			justify-content: flex-start;
			// width: 50%;
			align-items: flex-end;

			.title-main {
				color: #333333;
				font-size: 26rpx;
				font-weight: 700;
				margin-right: 10rpx;
			}

			.subhead {
				color: #747474;
				font-size: 28rpx;
			}
		}

		.time {
			flex: 1;
			color: rgba(35, 35, 35, 0.7);
			font-size: 26rpx;
		}

		.status {
			font-size: 30rpx;
			color: #747474;
		}
	}

	.item-tag {
		display: flex;
		justify-content: flex-start;
		// width: 80%;
		align-items: center;
		margin-top: 20rpx;
		flex-wrap: wrap;

		.service-tag {
			width: 110rpx;
			background-color: #eafaf5;
			font-size: 20rpx;
			color: #6f7070;
			padding: 5rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			border-radius: 25rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
		}
	}

	.cycle-and-price {
		display: flex;
		justify-content: space-between;
		font-size: 25rpx;
		color: #6c6c6c;
		margin-top: 10rpx;

		.cycle {
			width: 80%;
		}

		.price {
		}
	}

	.project-row {
		display: flex;
		align-items: center;
		margin-top: 36rpx;

		.img {
			width: 136rpx;
			height: 136rpx;
			border-radius: 20rpx;
		}

		.name {
			color: #232323;
			font-size: 32rpx;
			font-weight: bold;
			margin-left: 24rpx;
		}
	}

	.info-row {
		display: flex;
		margin-top: 40rpx;

		.name {
			width: 136rpx;
			color: rgba(35, 35, 35, 0.7);
			font-size: 26rpx;
		}

		.value {
			color: #232323;
			font-size: 26rpx;
		}
	}

	.div-line {
		width: 100%;
		height: 2rpx;
		background: #f8f8f8;
		margin-top: 40rpx;
	}

	.price-and-pay {
		display: flex;
		align-items: center;
		margin-top: 20rpx;

		.left {
			display: flex;
			align-items: center;
			flex: 1;
		}

		.cancel-btn {
			width: 150rpx;
			height: 60rpx;
			border: solid 2rpx rgba(35, 35, 35, 0.26);
			border-radius: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: rgba(35, 35, 35, 0.8);
			font-size: 26rpx;
			margin-left: 8rpx;
			margin-right: 8rpx;
		}

		.ok-btn {
			width: 150rpx;
			height: 60rpx;
			border: solid 2rpx #0bc5ae;
			border-radius: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #0bc5ae;
			font-size: 26rpx;
			margin-left: 8rpx;
			margin-right: 8rpx;
		}
	}
}

.del-btn {
	width: 60rpx;
	height: 40rpx;
	border: solid 2rpx #c5070a;
	border-radius: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c5070a;
	font-size: 14rpx;
	margin-left: 8rpx;
	margin-right: 8rpx;
}

.service-btn {
	display: flex;
	justify-content: flex-end;
	margin-top: 20rpx;
	flex-wrap: wrap;
}

.service-btn .my-btn:not(:last-child) {
	margin-right: 10rpx;
}

.my-btn {
	min-width: 140rpx;
	height: 58rpx;
	line-height: 58rpx;
	border: 1rpx solid #d0d0d0;
	border-radius: 40rpx;
	color: #787878;
	text-align: center;
}

.btn-green {
	border-color: #04bdb3;
	color: #04bdb3;
}

.editBtn {
	position: absolute;
	right: 40rpx;
	bottom: 10rpx;
	min-width: 140rpx;
	height: 58rpx;
	line-height: 58rpx;
	border: 1rpx solid #d0d0d0;
	border-radius: 40rpx;
	color: #787878;
	text-align: center;
}

.addPatient {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 30rpx;

	.add-icon {
		background: url(/nursingWorkerPages/static/icon_add.png) no-repeat center center;
		width: 50rpx;
		height: 50rpx;
		background-size: 100% 100%;
	}
}

.service-popup-view {
	width: 100%;
	background: white;
	padding: 40rpx;
	box-sizing: border-box;
	border-top-left-radius: 24rpx;
	border-top-right-radius: 24rpx;
	display: flex;
	flex-direction: column;

	.title-view {
		position: relative;
		display: flex;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 10rpx 0;

		.title {
			color: #232323;
			font-size: 32rpx;
			font-weight: bold;
		}

		.close-btn-view {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 0;

			.close-btn {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	scroll-view {
		width: 100%;
		height: 70vh;
	}

	.item {
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: solid 2rpx #f8f8f8;
		padding-top: 36rpx;
		padding-bottom: 36rpx;

		.left-view {
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;
			}
		}

		.right-view {
			flex: 1;
			margin-left: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.name-view {
				display: flex;
				color: #232323;
				font-size: 30rpx;
				font-weight: bold;
			}

			.adder-view {
				color: rgba(35, 35, 35, 0.5);
				font-size: 24rpx;
			}
		}
	}
}

.form-item-row {
	width: 100%;
	min-height: 120rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.label {
		color: #232323;
		font-size: 32rpx;
		white-space: nowrap;
	}

	.small-label {
		color: #232323;
		font-size: 32rpx;
	}

	.required-label::after {
		content: '*';
		color: #e74242;
		font-size: 30rpx;
		margin-left: 4rpx;
	}

	.selector-text {
		color: #232323;
	}

	input {
		text-align: end;
	}
}

.save-btn {
	width: 100%;
	height: 88rpx;
	background: #0bc5ae;
	border-radius: 48rpx;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
}

.bottom-view {
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.worker {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	min-height: 80rpx;
	margin: 20rpx 0;

	.avatar {
		margin: 0 30rpx;

		image {
			width: 70rpx;
			height: 70rpx;
		}
	}

	.worker-info {
		.info {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin: 10rpx 0;
		}
	}
}

.info-item {
	font-size: 25rpx;
	color: #6c6c6c;
	margin-right: 15rpx;
}

.select-button {
	width: 40rpx;
	height: 40rpx;

	image {
		width: 40rpx;
		height: 40rpx;
	}
}

.bottom-fixed-view {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 116rpx;
	background: white;
	padding-left: 30rpx;
	padding-right: 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.left {
		display: flex;
		align-items: center;
	}

	.right-btn {
		width: 226rpx;
		height: 88rpx;
		border-radius: 48rpx;
		background: #0bc5ae;
		color: white;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.import-btn {
	position: fixed;
	right: 10rpx;
	top: 10rpx;
	width: 80rpx;
	height: 80rpx;
	z-index: 999;
}

.file-box {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 20rpx 0;
}
.bottom-view {
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	margin-top: 100rpx;
}
</style>
